<template>
  <div>
    <Col :lg="24" :md="16">
    <Card class="warp-card" dis-hover>
      <Row justify="space-between" type="flex">
        <Col>
          <Input
            placeholder="任务名称"
            style="width: 200px;"
            v-model="searchForm.taskName"
          />
          <DatePicker type="daterange" :editable="false" split-panels placeholder="任务时间" :capture="false" @on-change="searchForm.taskPlanTime=$event" style="width: 200px;margin-left:20px;" v-model="searchForm.taskPlanTime"></DatePicker>
          <Select v-model="searchForm.status"  placeholder="任务状态" class="form-width" style="width:200px;margin-left:20px;">
            <Option
                    :key="item.value"
                    :value="item.value"
                    v-for="item in taskStatusList"
            >{{ item.label }}</Option>
          </Select>
          <Button
            @click="searchData" icon="md-search"
            style="margin-left: 20px;"
            type="primary"
            v-privilege="'search-defect-task'"
          >查询
          </Button>
          <Button
            @click="clearSearch"
            style="margin-left: 20px;"
            icon="md-refresh"
            type="default"
            v-privilege="'search-defect-task'"
          >重置
          </Button>
        </Col>
      </Row>
      <!-- Form 搜索按钮区 end -->
      <Row style="padding-top:10px; ">
        <Col :lg="24" :md="24">
          <Table :columns="columns" :data="data" :loading="isShowTablesLoading" ref="tablesMain"></Table>
        </Col>
      </Row>
      <Row class="page" justify="end" style="position: relative;margin-top: 10px;" type="flex">
        <Page
          :current="searchForm.pageNum"
          :page-size="searchForm.pageSize"
          :total="totalPage"
          @on-change="changePage"
          show-total
          show-elevator
        ></Page>
      </Row>
    </Card>
    </Col>
  </div>
</template>

<script>
import { detectTaskApi } from '@/api/detect-task-manage';
import SubTaskManage from '../sub-task/sub-task.vue';
export default {
  name: 'MainTaskManage',
  components: {
    SubTaskManage
  },
  props: {},
  data() {
    return {
      isShowPage: true,
      searchValue: '',
      isShowEditModal: false,
      isShowAddModal: false,
      // table是否Loading
      isShowTablesLoading: true,
      isShowSaveLoading: true,
      isShowUpdateLoading: true,
      totalPage: 0,
      taskStatusList:[
        { value:"0",
          label:'未开始'
        },
        { value:"1",
          label:'运行中'
        },
        { value:"2",
          label:'暂停'
        },
        { value:"3",
          label:'完成'
        }
      ],
      // table表头
      columns: [
        {
          title: '工单编号',
          width: 160,
          align: "left",
          key: 'taskCode'
        },
        {
          title: '任务名称',
          width: 200,
          align: "left",
          key: 'taskName'
        },
        {
          title: '计划总数',
          align: "left",
          key: 'planNum',
          width: 100
        },
        {
          title: '计划开始时间',
          width: 160,
          align: "left",
          key: 'planStartTime'
        },
        {
          title: '计划结束时间',
          width: 160,
          align: "left",
          key: 'planEndTime'
        },
        {
          title: '计划完成时间',
          width: 160,
          align: "left",
          key: 'completionTime'
        },
        {
          title: '任务状态',
          width: 80,
          align: "left",
          key: 'statusDesc'
        },
         {
          title: '任务描述',
          align: "left",
          key: 'taskDesc'
        },
         {
          title: '操作',
          key: 'action',
          width: 150,
          align: 'center',
          className: 'action-hide',
          render: (h, params) => {
            return this.$tableAction(h, [
              {
                title: '查看',
                directives: [
                  {
                    name: 'privilege',
                    value: 'search-main-subTask'
                  }
                ],
                action: () => {
                  this.showSubTask(params.row.id)
                }
              }
            ]);
          }
        }
      ],
      // table数据
      data: [],
      searchForm: {
        taskName: '',
        taskPlanTime:'',
        planStartTime:'',
        planEndTime:'',
        status: '',
        pageNum: 1,
        pageSize: 10,
        searchCount: true,
        sort: false
      },
      searchFormInt: {},
    };
  },
  computed: {},
  watch: {},
  filters: {},
  created() {},
  mounted() {
    Object.assign(this.searchFormInt, this.searchForm);
    this.getMainTaskByPage();
  },
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
  methods: {
    async getMainTaskByPage() {
      try {
        this.isShowTablesLoading = true;
        this.isShowPage = true;
        if(this.searchForm.taskPlanTime&&this.searchForm.taskPlanTime.length>0){
          this.searchForm.planStartTime = this.searchForm.taskPlanTime[0]
          this.searchForm.planEndTime = this.searchForm.taskPlanTime[1]
        }
        let result = await detectTaskApi.getStartTaskByPage(this.searchForm);
        this.isShowTablesLoading = false;
        let datas = result.data;
        this.data = datas.list;
        this.totalPage = datas.total;
      } catch (e) {
        this.isShowTablesLoading = false;
        console.error(e);
      }
    },
    // 页码改变
    changePage(pageNum) {
      this.searchForm.pageNum = pageNum;
      this.getMainTaskByPage();
    },
    // 改变每页显示数据条数
    changePageSize(pageSize) {
      this.searchForm.pageNum = 1;
      this.searchForm.pageSize = pageSize;
      this.getMainTaskByPage();
    },
     showSubTask(mainTaskId) {
      this.$store.commit('setMainTaskId', mainTaskId);
      this.$router.push({ name: 'SubTaskManage'});
    },
    // 搜索
    searchData() {
      this.pageNum = 1;
      this.getMainTaskByPage();
    },
    // 重置
    clearSearch() {
      Object.assign(this.searchForm, this.searchFormInt);
      this.getMainTaskByPage();
    }
  }
};
</script>
<style lang="less" scoped>
.form-width {
  width: 100%;
}
</style>
